<template>
	<view class="box">
		<view class="top">
			<view class="header">
				<view class="nav">
					<view :class="type == 1?'on':''" @click="[type = 1,deleteList = '',list = [],getlist(1,{pageIndex:1,pageSize:10,userId:SearchuserId}),nullData = false,page = 1]">干预计划</view>
					<view :class="type == 2?'on':''" @click="[type = 2,deleteList = '',list = [],getlist(2,{pageNum:1,pageSize:10,planType:'isPlan',userId:SearchuserId}),nullData = false,page = 1]">执行日期</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view v-if="type == 1"  class="interventionPlan">
				<uni-swipe-action  class="implement" v-for="(item,index) in list" :key="index">
					<image src="@/static/img/quickly/healthStatus/number@2x.png" class="identifier"></image>
					<uni-swipe-action-item  :right-options="options" @click="bindClick(item)">
						<view class="upperPart">
							<text class="assementNumber">{{item.status == 1 ? '评估编号' : item.sn}}</text>
							<text :class="item.status == 1 ? 'dataTime1' : 'dataTime'">{{item.status == 1 ? '未存档' : item.modifiedDate}}</text>
						</view>
						<view class="lowerPart">
							<view class="nameBox">
								<text class="userName">{{item.realName ? item.realName : item.memberNmae ? item.memberNmae : item.userName}}</text>
							</view>
							<view class="buttonBox">	
								<view class="qsDetail" @click="detail(item)">详情</view>
								<view class="applyFor" @click="detail(item)" v-if="item.status == 1">确认存档</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>	
						
				<view class="noneChating" v-if="list.length <= 0">
					<image src="@/static/img/headFeature/chattingNone.png"></image>
					<view>暂无数据</view>
				</view>
			</view>
			<view v-else>
				<uni-swipe-action  class="mainContent" v-for="(item,index) in list" :key="index" v-if="list.length > 0">
					<uni-swipe-action-item :right-options="options" @click="bindClick(item,'计划')">
						<view class="initalValue">
							<view class="nameBox">
								<image src="../../../static/img/quickly/intervenscheme/headPortraits.png"></image>
								<text class="name">{{item.userName}}</text>
								<text class="stateCode1" v-if="item.status == 1">正常</text>
								<text class="stateCode" v-if="item.status == 2">逾期</text>
							</view>
							<view class="carryOut" @click="carryOut(item.id)">执行</view>
						</view>
						<navigator class="executeData">
							<view class="executeTime">
								<view>
									<text>计划日期：</text>
									<text>{{item.createdDate}}</text>
								</view>
								<view>
									<text>主要内容：</text>
									<text>{{item.content}}</text>
								</view>
							</view>
							<view class="specificItem">
								<view>具体事项：</view>
								<text v-html="item.specificMatters"></text>
							</view>
						</navigator>
					</uni-swipe-action-item>
				</uni-swipe-action>
				<view class="nulldata" style="text-align: center;font-size: 26upx;color: #ccc;padding-bottom: 20upx;" v-if="nullData">
					<view>没有更多数据了</view>
				</view>
				<view class="noneChating" v-if="list.length <= 0">
					<image src="@/static/img/headFeature/chattingNone.png"></image>
					<view>暂无数据</view>
				</view>
			</view>
		</view>
		
		<view class="location">
			<image src="@/static/img/quickly/healthStatus/add@2x.png"  @click="addQuestion"></image>
		</view>
		
		<u-modal v-model="showModal" :show-cancel-button="true" @confirm="Modalconfirm" :content="showContent"></u-modal>
		<u-modal v-model="showModal1" :show-cancel-button="true" @confirm="Modalconfirm1" :content="showContent1"></u-modal>
	</view>
</template>

<script>
	import uSwipeActionItem from "@/components/uni-swipe-action-item/uni-swipe-action-item.vue";
	import uniSwipeAction from "@/components/uni-swipe-action/uni-swipe-action.vue";
	export default {
		data () {
			return {
				pageNum:1,
				pageSize:100,
				list:[],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#EE2437' // 删除按钮背景  红的
					}
				}],
				type:1,
				listLabel:[
					{
						name:'方案编号：',
						key:'sn'
					},
					{
						name:'签发时间：',
						key:'modifiedDate'
					},
				],
				listtitle:'干预计划',
				showModal:false,
				showContent:'',
				showModal1:false,
				showContent1:'',
				name: '',
				screenArr:[],
				page:1,
				deleteList: '',
				nullData:false,
				SearchuserId:''
				
			}
		},
		mounted(){
			// this.getlist(1)
			this.getlist(1,{pageIndex:this.page,pageSize:10})
		},
		onReachBottom(){
			if(this.type == 1) {
				if(this.nullData == true){
					return;
				}
				this.page = this.page + 1
				this.getlist(1,{pageIndex:this.page,pageSize:10,userId:this.SearchuserId})
			}else {
				if(this.nullData == true){
					return;
				}
				this.page = this.page + 1
				this.getlist(2,{pageIndex:this.page,pageSize:10,userId:this.SearchuserId,planType:'isPlan'})
			}
			
		},
		methods:{
			nameInput(e){
				const data =  {str:e == 'first'?'':e.detail.value}
				this.$api.selectMembershipList(data).then((res) => {
					if(res.data.returnCode == 200) {
						this.screenArr = res.data.result.list;
					}
				})
			},
			comSearch(e){
				this.page = 1
				this.SearchuserId = e == 'all'? '' : e.userId
				this.nullData = false
				this.name = e == 'all'?'全部': e.realName
				this.deleteList = 1;
				this.screenArr = []
				this.type == 1 ? 
					this.getlist(this.type,{pageIndex:1,pageSize:10,userId:e.userId})
				:
					this.getlist(2,{pageNum:1,pageSize:10,planType:'isPlan',userId:e.userId})
			},
			getlist(e,i){
				e == 1?
					this.$api.InterventionPlanPlanList(i).then((res)=>{
						var data = res.data.result && res.data.result.elements || []			
						if(this.deleteList == 1) {
							this.list = []
							this.list = data
							this.deleteList = ''
						}else {
							this.$set(this,'list',this.list ? this.list.concat(data) : data)
							if(this.list.length >= res.data.result.totalCount){
								this.nullData = true;
							}
						}
					})
				:
					this.$api.InterventionPlanList(i).then((res)=>{
						var data = res.data.result && res.data.result.elements || []
						if(this.deleteList == 1) {
							this.list = []
							this.list = data
							this.deleteList = ''
						}else {
							this.$set(this,'list',this.list ? this.list.concat(data) : data)
							if(this.list.length >= res.data.result.count){
								this.nullData = true;
							}
						}
					})
					
			},
			detail(e){
				e.status == 1 ?
					uni.navigateTo({url:'/pages/quickly/intervenscheme/creat?id='+e.id})
				:
					uni.navigateTo({url:'/pages/quickly/intervenscheme/toView?id='+e.id})
			},
			addQuestion() {
				uni.navigateTo({url:'/pages/quickly/intervenscheme/creat'})
			},
			// inputBlur() {
			// 	this.getlist(1);
			// },
			bindClick(e,n){
				if(!n){
					this.showModal = true
					this.showContent = '是否删除此干预计划方案'
					this.delItem = e
					this.isplan = false
				}else{
					this.showModal = true
					this.showContent = '是否删除此干预计划'
					this.delItem = e
					this.isplan = true
				}
				
				// UserInfodelete
			},
			createPlan() {
				uni.navigateTo({
					url:'/pages/quickly/intervenscheme/creat'
				})
			},
			Modalconfirm(e){
				this.isplan ? 
						this.$api.Interventiondelete(this.delItem.id).then((res)=>{
							if(res.data.returnCode == 200){						
								this.page = 1
								this.deleteList = 1;
								this.nullData = false;
								this.getlist(2,{pageNum:this.pageNum,pageSize:this.pageSize,planType:'isPlan'})
							}
						})
					:
						this.$api.InterventiondeleteByPlan(this.delItem.id).then((res)=>{
							if(res.data.returnCode == 200){
								this.page = 1
								this.deleteList = 1;
								this.nullData = false;
								this.getlist(1,{pageIndex:this.page,pageSize:10})
							}
						})
			},
			carryOut(id) {
				this.showModal1 = true
				this.showContent1 = '是否执行此计划。'
				this.carryId = id;
				
			},
			Modalconfirm1(){
				const _this = this;
				_this.$api.InterventionrunPlan(this.carryId).then((res)=>{
					if (res.data.returnCode == 200) {
						_this.$api.InterventionPlanList({pageNum: 1,pageSize: 20,planType: 'isToday',}).then((res) => {
							if (res.data.returnCode == 200) {
								_this.list = res.data.result && res.data.result.elements || []
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		/deep/ .uni-swipe_box {
			display: block !important;
			position: relative;
			padding: 0 10upx;
		}
		/deep/.mainContent .uni-swipe_box{
			display: block !important;
			padding: 0 10upx;
		}
		/deep/ .list {
			.content{
				/deep/ .uni-swipe_box{
					display: flex !important;
					padding: 0 10upx;
				}
				padding-top: unset !important;
			}
		}
		width: 750upx;
		min-height: calc(100vh - 44px);
		background-color: #F8F8F8;
		.top {
			width: 750upx;
			background: url(@/static/img/quickly/intervenscheme/backgroundIntervenscheme.png) no-repeat;
			background-size: 100% 100%;
			height: 274upx;
		}
		.header {
			width: 750upx;	
			position: fixed;
			top: 44px;
			left: 0;
			height: 164upx;
			background-color: #04BFAB;
			padding: 55upx 0 0;
			box-sizing: border-box;
			z-index: 100;
			.nav {
				display: flex;
				width: 618upx;
				height: 64upx;
				margin: 0 auto;
				align-items: center;
				view {
					height: 100%;
					flex: 1;
					text-align: center;
					color: #333333;
					font-size: 32upx;
					background-color: #FFFFFF;
					line-height: 64upx;
				}
				view:nth-child(1) {
					border-radius: 30upx 0 0 30upx;
				}
				view:nth-child(2) {
					border-radius: 0 30upx 30upx 0 ;
				}
				.on {
					background-color: #64DDC6;
					color: #FFFFFF;
					font-weight: bold;			
				}
			}
		}

		.bottom {
			width: 750upx;
			margin-top: -154upx;
			padding-bottom: 40upx;
			.interventionPlan {
				padding-top: 44upx;
			}
			.implement {
				width: 702upx;
				height: 172upx;
				background: #FFFFFF;
				border-radius: 22upx;
				margin: 0 auto 24upx;
				z-index: 100;
				padding: 0 30upx;
				box-sizing: border-box;
				position: relative;
				.identifier{
					position: absolute;
					left: -4upx;
					top: 13%;
					width: 32upx;
					height: 30upx;
				}
				.upperPart {
					position: relative;
					height: 74upx;
					display: flex;
					align-items: center;
					border-bottom: 1upx solid #CCCCCC;
					.assementNumber {
						flex: 1;
						color: #666666;
						margin-left: 6upx;
					}
					.assementType,.dataTime1 {
						color: #EA0B0B;
						flex: 1;
						text-align: right;
					}
					.dataTime {
						color: #666666;
					}
				}
				.lowerPart {
					display: flex;
					align-items: center;
					height: 97upx;
					.nameBox {
						flex: 1;
						display: flex;
						align-items: baseline;
						.userName {
							margin-left: 10upx;
							color: #000000;
							font-size: 40upx;
						}
						image {
							width: 24upx;
							height: 24upx;
							margin: 0 12upx 0 18upx;
						}
						.healthName {
							color: #05C6AD;
							font-size: 26upx;
						}
					}
					.buttonBox {
						display: flex;
						.qsDetail,
						.applyFor,
						.generating,
						.viewAssessment{
							width: 146upx;
							height: 50upx;
							background: #6AB7FF;
							border-radius: 25upx;
							color: #FFFFFF;
							font-size: 30upx;
							line-height: 50upx;
							text-align: center;
						}
						.applyFor {
							background-color: #05C6AD;
							margin-left: 24upx;
						}
					}
				}
			}
			
			.mainContent {
				margin: 0 24upx 31upx;
				width: 702upx;
				background-color: #fff;
				border-radius: 12upx;
				padding: 44upx 15upx 0;
				box-sizing: border-box;
				.initalValue {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #F0F0F0;
					height: 102upx;	
					.nameBox {
						display: flex;
						align-items: center;
						flex: 1;			
						image {
							width: 30upx;
							height: 30upx;
						}			
						.name {
							color: #5A6065;
							font-size: 30upx;
							margin: 0 39upx 0 21upx;
						}		
						.stateCode {
							background: #FFE2E2;
							padding: 6upx 12upx;
							color: #E61111;
							font-size: 26upx;
							border-radius: 6upx;
						}		
						.stateCode1 {
							background: #DDFFE8;
							padding: 6upx 12upx;
							color: #11C537;
							font-size: 26upx;
							border-radius: 6upx;
						}
					}			
					.carryOut {
						width: 111upx;
						height: 48upx;
						border-radius: 24upx;
						background: linear-gradient(238deg, #05c6ad, #7cd6cb);
						box-shadow: 0px 2px 8px 0px rgba(56, 203, 151, 0.44);
						color: #FFFFFF;
						font-size: 28upx;
						text-align: center;
						line-height: 48upx;
					}
				}		
				.executeData {
					padding: 38upx 0;			
					.executeTime {
						display: flex;
						align-items: center;
			
						view {
							flex: 1;
							color: #666666;
							font-size: 26upx;
			
							text:last-child {
								color: #FF9600;
							}
						}
			
						view:last-child {
							text-align: right;
						}
					}
			
					.specificItem {
						color: #666666;
						font-size: 26upx;
						margin-top: 38upx;
						display: flex;
						align-items: center;
						text:last-child {
							color: #333333;
							flex: 1;
							line-height: 40upx;
						}
					}
				}
			}
		}
		.noneChating {
			padding-top: 228upx;
			image {
				display: block;
				margin: 0 auto;
				width: 260upx;
				height: 154upx;
			}
			view {
				margin: 24px auto;
				text-align: center;
				color: #333333;
				font-size: 13px;
			}
		}
		
		.location {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750upx;
			height: 135upx;
			background: url('@/static/img/quickly/healthStatus/suspensionBg@2x.png') no-repeat;
			background-size: 100% 100%;
			image {
				position: fixed;
				bottom: 26upx;
				left: 50%;
				transform: translateX(-50%);
				width: 90upx;
				height: 90upx;
			}
		}
	}
</style>
